<template>
    <div>
        <div class="tree-top-operation" :inline="true">
            <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="appendTop()">添加顶级菜单</el-button>
        </div>
        <!-- 树菜单 -->
        <div class="block" ref="tree" style="margin-top: 20px;overflow-y: auto;">
            <el-tree :data="dataList" node-key="id" :props="defaultProps" accordion>
                 <span class="custom-tree-node" slot-scope="{ node, data }">
                    <span >{{ data.code+node.label }}</span>
                    <span>
                      <el-button circle icon="el-icon-plus" size="mini" type="success" @click="insert(node,data)"></el-button>
                      <el-button circle icon="el-icon-edit" size="mini" type="primary" @click="update(node, data)"></el-button>
                    </span>
                  </span>
            </el-tree>
        </div>
        <!-- 详情框 -->
        <el-dialog :title="dialog.title" :visible.sync="dialog.isShow" :close-on-click-modal="false" width="700px">
            <el-form label-position="right" label-width="120px" :model="dialogData">
                <el-form-item label="父级ID" v-if="dialog.title.indexOf('添加')>-1">
                   <el-input v-model="dialogData.parentId" disabled></el-input>
                </el-form-item>
                <el-form-item label="父级菜单名称" v-else>
                    <el-autocomplete  class="autocomplete-row" v-model="dialogData.parentName" :fetch-suggestions="querySearchAsync" placeholder="请输入父级菜单名称" @select="handleSelect"></el-autocomplete>
                </el-form-item>

                <el-form-item label="文件名"><el-input v-model="dialogData.name"></el-input></el-form-item>
                <el-form-item label="文件编号"><el-input v-model="dialogData.code"></el-input></el-form-item>
                <el-form-item label="文件排序"><el-input v-model="dialogData.rank"></el-input></el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitDialog">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import api from '@/axios/api.js'
export default {
    data(){
        return{
            dataList:[],
            defaultProps:{
                label:'name',
                children:'chlidren',
                id: 'id'
            },
            dialog:{
                title:'',
                isShow:false
            },
            allTreeMenu:[],/**所有树菜单列表 */
            dialogData:{
            }
        }
    },
    created(){
        let self = this;
        this.getTreeAll();
        api.getAllTreeMenu().then(res=>{
            self.allTreeMenu=[];
            res.content.forEach(el => {
                self.allTreeMenu.push({
                    name:el.name,
                    value:el.code + el.name,
                    id:el.id
                })
            });
        })
    },
    methods:{
        getTreeAll(){
            let self =this;
            api.xjFileTreeList().then(res=>{
                self.dataList =res.content;
            })
        },
        submitDialog(){
            let self = this;
            let postData={
                code: self.dialogData.code,
                id: self.dialog.title.indexOf('添加')>-1?null:self.dialogData.id,
                name: self.dialogData.name,
                parentId:self.dialogData.parentId,
                rank:self.dialogData.rank
            }
            api.addUpdateTree(self.dialog.title.indexOf('添加')>-1?'insert':'updateTree',postData).then(res=>{
                self.getTreeAll()
                self.dialog.isShow=false;
                self.$message.success(`${self.dialog.title}成功！`);
            })
        },
        appendTop(){
            let self = this;
            self.dialog.title ='添加顶级菜单';
            self.dialog.isShow = true;
            self.dialogData = {parentId:0,name:'',code:'',rank:''};
        },
        insert(node,data){
            let self = this;
            self.dialog.title ='添加子级菜单';
            self.dialog.isShow = true;
            self.dialogData = {parentId:data.id,name:'',code:'',rank:''};
        },
        update(node,data){
            let self = this;
            self.dialog.title ='编辑';
            self.dialog.isShow = true;
            self.dialogData = {id:data.id,parentId:data.parentId,name:data.name,code:data.code,parentName:node.parent.label,rank:''};
        },
        querySearchAsync(queryString, callback){
            let results = queryString ?  this.allTreeMenu.filter(this.createStateFilter(queryString)) : this.allTreeMenu;
            callback(results);
        },
        handleSelect(item){
            this.dialogData.parentName=item.value;
            this.dialogData.parentId=item.id;
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) !==-1);
            };
        }
    }
}
</script>
<style scoped>
.autocomplete-row{
    width: 100%;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding-right: 8px;
}

.custom-tree-node > span:first-child {
    margin: 0 40px 0 0;
}

.custom-tree-node > span:nth-child(2) {
    display: none;
}

.custom-tree-node:hover > span:nth-child(2) {
    display: inline-block;
}

</style>

